<template>
  <div>
    <el-row :gutter="8">
      <el-col :span="8">
        <el-card shadow="never" class="box-style">
          <div slot="header">
            <span>菜单列表</span>
          </div>

          <el-row :gutter="8" style="margin-bottom: 8px;">
            <el-col :span="16">
              <el-input size="small" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button size="small" @click="loadMenu()">刷新</el-button>
              <el-button size="small" @click="append()">新增</el-button>
            </el-col>
          </el-row>

          <el-tree
            ref="tree"
            :data="data"
            node-key="id"
            :expand-on-click-node="false"
            @node-click="nodeClick"
            :filter-node-method="filterNode"
            v-loading="tree.loading"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click.stop="() => append(data)">新增</el-button>
                <el-button type="text" size="mini" @click.stop="() => remove(node, data)">删除</el-button>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="16">
        <base-form :fields="fields" size="medium" :data="formData" @submit="submit" title="菜单编辑"></base-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import menu from './mixins/menu'
import roleTable from '../role/role-table'
import { getMenuList } from '@/api/menu'

export default {
  name: 'menu-page',
  mixins: [menu],
  components: {roleTable},
  data () {
    return {
      data: [],
      action: 'save',
      filterText: '',
      tree: {
        loading: false
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
    this.loadMenu()
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    submit () {
      this.$post(this.baseURL + '/' + this.action, this.formData).then(data => {
        if (data.success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.loadMenu()
        } else {
          this.$message.error('操作失败')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    loadMenu () {
      this.tree.loading = true
      getMenuList().then(data => {
        const rows = data
        const tmpMenus = rows
        this.data = tmpMenus
      }).catch(error => {
        console.log(error)
      }).finally(() => {
        this.tree.loading = false
      })
    },
    nodeClick (obj, node, comp) {
      this.action = 'update'
      this.formData = obj.attributes
    },
    append (data) {
      this.$message({
        message: '右侧编辑新建菜单内容',
        showClose: true,
        type: 'info'
      })
      this.action = 'save'
      if (data === undefined) {
        Object.assign(this.$data.formData, this.$options.data().formData)
      } else {
        const itemData = data.attributes
        const menuId = itemData.menuId
        Object.assign(this.$data.formData, this.$options.data().formData)
        this.formData.parentMenuId = menuId
      }
    },
    remove (node, data) {
      this.$confirm('是否删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$post(this.baseURL + '/delete', data.attributes).then(data => {
          if (data.success) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.loadMenu()
          } else {
            this.$message.error('删除失败')
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .box-style {
    min-height: 80vh;
  }
</style>
